<template>
  <view style="height: 100%;">
    <!--    <law-top-nav :title="title"></law-top-nav>-->
    <!-- 导航栏 -->
    <shopro-navbar :isBack="true" :isOrder="isOrder" :backIconColor="'#000'">
      <view class="head_box" slot="content">
        {{ title }}
      </view>
    </shopro-navbar>
    <view class="login-wrap form-wrap" style="height: 100%;">
      <!-- 1.账号密码登录 -->
      <view v-if="authType === 'accountLogin'">
        <!-- 标题 -->
        <view class="form-item  u-border-bottom ">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" placeholder="请输入手机号" @blur="checkValue($event, 'account')" @input="checkValue($event, 'account')" :placeholderStyle="placeholderStyle" v-model="form['accountLogin'].data.account" type="text"></u-input>
            <button class="u-reset-button forgot-btn" @tap="showAuthModal('smsLogin')">验证码登录</button>
          </view>
          <view class="message-error">{{ form['accountLogin'].error.account || '' }}</view>
        </view>
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" placeholder="请输入密码" :placeholderStyle="placeholderStyle" v-model="form['accountLogin'].data.password" type="password" @blur="checkValue($event, 'password')" @input="checkValue($event, 'password')"></u-input>

          </view>
          <view class="message-error">{{ form['accountLogin'].error.password || '' }}</view>
        </view>
        <button class="u-reset-button login-btn-start seckill-btn" @tap="accountLoginSubmit">登录</button>
      </view>

      <!-- 2.短信登录 -->
      <view v-if="authType === 'smsLogin'">
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" placeholder="请输入手机号" @blur="checkValue($event, 'mobile')" @input="mobileInput($event, 'mobile')" :placeholderStyle="placeholderStyle" v-model="form['smsLogin'].data.mobile" type="number"></u-input>

          </view>
          <view class="message-error">{{ form['smsLogin'].error.mobile || '' }}</view>
        </view>
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')" @input="checkValue($event, 'code')" placeholder="请输入验证码" :placeholderStyle="placeholderStyle" v-model="form['smsLogin'].data.code" type="number"></u-input>
            <button class="u-reset-button code-btn code-btn-start" :disabled="!form['smsLogin'].data.isMobileEnd" :class="{ 'code-btn-end': form['smsLogin'].data.isMobileEnd }" @tap="getSmsCode('mobilelogin')">
              {{ codeText }}
            </button>
            <qq> aaaaaaaaaaaaaaaaaaaaaaaaa</qq>
          </view>
          <view class="message-error">{{ form['smsLogin'].error.code || '' }}</view>
        </view>
        <button class="u-reset-button login-btn-start seckill-btn" @tap="smsLoginSubmit">登录</button>
        <!--        <button class="u-reset-button type-btn" @tap="showAuthModal('register')">立即注册</button>-->
      </view>

      <!-- 3.注册 -->
      <view v-if="authType === 'register'">
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" placeholder="请输入手机号" @blur="checkValue($event, 'mobile')" @input="mobileInput($event, 'mobile')" :placeholderStyle="placeholderStyle" v-model="form['register'].data.mobile" type="number"></u-input>
          </view>
          <view class="message-error">{{ form['register'].error.mobile || '' }}</view>
        </view>
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'password')" @input="checkValue($event, 'password')" placeholder="请输入密码" :placeholderStyle="placeholderStyle" v-model="form['register'].data.password" type="password"></u-input>
          </view>
          <view class="message-error">{{ form['register'].error.password || '' }}</view>
        </view>
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')" @input="checkValue($event, 'code')" placeholder="请输入验证码" :placeholderStyle="placeholderStyle" v-model="form['register'].data.code" type="number"></u-input>
            <button class="u-reset-button code-btn code-btn-start border-none" :disabled="!form['register'].data.isMobileEnd" :class="{ 'code-btn-end': form['register'].data.isMobileEnd }" @tap="getSmsCode('register')">
              {{ codeText }}
            </button>
          </view>
          <view class="message-error">{{ form['register'].error.code || '' }}</view>
        </view>
        <button class="u-reset-button login-btn-start seckill-btn" @tap="registerSubmit">注册</button>
      </view>

      <!-- 4.忘记密码 -->
      <view v-if="authType === 'forgotPwd'">
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'mobile')" @input="mobileInput($event, 'mobile')" placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.mobile" type="number"></u-input>
          </view>
          <view class="message-error">{{ form['forgotPwd'].error.mobile || '' }}</view>
        </view>

        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')" @input="checkValue($event, 'code')" placeholder="请输入验证码" :placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.code" type="number"></u-input>
            <button class="u-reset-button code-btn code-btn-start border-none" :disabled="!form['forgotPwd'].data.isMobileEnd" :class="{ 'code-btn-end': form['forgotPwd'].data.isMobileEnd }" @tap="getSmsCode('resetpwd')">
              {{ codeText }}
            </button>
          </view>
          <view class="message-error">{{ form['forgotPwd'].error.code || '' }}</view>
        </view>
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'newPassword')" @input="checkValue($event, 'newPassword')" placeholder="设置新密码" :placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.newPassword" type="password"></u-input>
          </view>
          <view class="message-error">{{ form['forgotPwd'].error.newPassword || '' }}</view>
        </view>
        <view class="form-item u-border-bottom">
          <view class="item-content u-flex u-col-center">
            <u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'reNewPassword')" @input="checkValue($event, 'reNewPassword')" placeholder="确认新密码" :placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.reNewPassword" type="password"></u-input>
          </view>
          <view class="message-error">{{ form['forgotPwd'].error.reNewPassword || '' }}</view>
        </view>
      </view>
      <!-- 第三方登录 -->
      <view v-if="authType == 'toLogin'" class="auto-login-box u-flex u-row-center u-col-center">
        <!-- 微信 :src="$IMG_URL + '/imgs/auto_login_iphone.png'"   <text @click.stop="phone_login('accountLogin')">账号登录/</text>-->
        <view class="login-center">
          <image class="auto-login-img login-img" src="http://file.shopro.top/uploads/20210518/c7b17849d22f345b4886d9a7dc6ef72a.png"></image>
          <text class="title">多米惠选欢迎您</text>
          <button v-if="!protocol" class="seckill-btn" @click="clickagree()">微信用户一键登录</button>
          <button v-else @click="thirdLogin('wechat')" class="seckill-btn">微信用户一键登录</button>
          <!--<text @click.stop="phone_login('register')">/注册</text>-->
          <view class="gray u-font-sm">请选择<text @click.stop="phone_login('smsLogin')">手机号登录</text></view>
        </view>
      </view>

      <!-- 没有账号去注册提示 -->
      <view v-if="['accountLogin', 'forgotPwd', 'register'].includes(authType)" class=" u-flex u-row-between">
        <view class="agreement-text u-flex u-col-center text-red" v-if="authType == 'accountLogin'" @click.stop="phone_login('forgotPwd')">
          忘记密码？
        </view>
        <view class="agreement-text u-flex u-col-center gray" v-if="authType == 'accountLogin'" @click.stop="phone_login('register')">
          暂无账号， 去注册
        </view>
        <view class="agreement-text u-flex u-col-center gray" v-if="authType != 'accountLogin'">
        </view>
        <view class="agreement-text u-flex u-col-center gray" :class="authType == 'forgotPwd'?'u-m-t-40':''" v-if="authType != 'accountLogin'" @click.stop="phone_login('accountLogin')">
          有账号， 去登录
        </view>
      </view>
    </view>
    <!-- 协议 -->
    <view v-if="['accountLogin','toLogin','toLogins'].includes(authType)" class=" u-flex u-row-center agreement-box">
      <u-checkbox v-model="protocol" shape="circle" active-color="#FC5351">
        <view class="agreement-text u-flex u-col-center">
          选中登录代表您已同意
          <view class="tcp-text u-flex u-col-center">
            <view @tap.stop="$Router.push({ path: '/pages/public/richtext', query: { id: initShop.user_protocol || 0 } })">《用户服务协议》</view>
            <!--              与-->
            <!--              <view @tap.stop="$Router.push({ path: '/pages/public/richtext', query: { id: initShop.privacy_protocol || 0 } })">《隐私协议》</view>-->
          </view>
        </view>
      </u-checkbox>
    </view>
    <u-popup closeable v-model="bindmobille" mode="center" @close="close" @open="open" width="612rpx">
      <view class="notice-modal">
        <image class="auto-login-img login-img" src="http://file.shopro.top/uploads/20210518/c7b17849d22f345b4886d9a7dc6ef72a.png"></image>
        <text class="title">多米惠选欢迎您</text>
        <button class="seckill-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键绑定手机号</button>
      </view>
    </u-popup>
  </view>
  </view>
</template>

<script>
/**
 * 登录提示页
 */
// import FormValidate from '@/shopro/validate/form';
// // import schema from '@/uview-ui/libs/util/async-validator';
// import wechat from '@/shopro/wechat/wechat';
import {
  mapMutations,
  mapActions,
  mapState,
  mapGetters
} from 'vuex';
// #ifdef APP-PLUS
import apple from '@/shopro/apple';
// #endif

export default {
  name: 'shoproAuthModal',
  data() {
    return {
      isOrder: '1',
      title: '登录',
      platform: "",
      device: "",
      bindmobille: false,
      tokens: '',
      form: {
        // 1.账号密码登录
        accountLogin: {
          data: {
            account: '', // 账号
            password: '' // 密码
          },
          rules: {
            account: FormValidate.account,
            password: FormValidate.password
          },
          error: {
            account: '',
            password: ''
          }
        },

        // 2.短信登录
        smsLogin: {
          data: {
            mobile: '', // 手机号
            code: '', // 验证码
            isMobileEnd: false // 手机号输入完毕
          },
          rules: {
            code: FormValidate.code,
            mobile: FormValidate.mobile
          },
          error: {
            mobile: '', // 手机号
            code: '' // 验证码
          }
        },
        // 3.注册
        register: {
          data: {
            mobile: '', // 手机号
            code: '', // 验证码
            password: '', // 密码
            isMobileEnd: false // 手机号输入完毕
          },
          rules: {
            code: FormValidate.code,
            mobile: FormValidate.mobile,
            password: FormValidate.password
          },
          error: {
            mobile: '', // 手机号
            code: '', // 验证码
            password: '' // 密码
          }
        },

        // 4.忘记密码//改密码
        forgotPwd: {
          data: {
            mobile: '', //手机号
            code: '', //验证码
            newPassword: '', //新密码
            reNewPassword: '', //确认密码
            isMobileEnd: false, // 手机号输入完毕
          },
          rules: {
            mobile: FormValidate.mobile,
            code: FormValidate.code,
            newPassword: FormValidate.password,
            reNewPassword: [{
              required: true,
              message: '请重新输入密码',
              trigger: ['change', 'blur']
            },
            {
              validator: (rule, value, callback) => {
                return value === this.form.forgotPwd.data.newPassword;
              },
              message: '两次输入的密码不一致',
              trigger: ['change', 'blur']
            }
            ]
          },
          error: {
            mobile: '', //手机号
            code: '', //验证码
            newPassword: '', //新密码
            reNewPassword: '' //确认密码
          }
        },

      },
      codeText: '获取验证码',
      disabledCode: false,
      protocol: false, //是否同意隐私协议
      placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',
      redirected: ''
    };
  },

  computed: {
    // ...mapGetters(['initShop', 'isLogin', 'authType']),
    // showAuth: {
    // 	get() {
    // 		return !!this.authType;
    // 	},
    // 	set(value) {
    // 		value ? uni.hideTabBar() : uni.showTabBar();
    // 	}
    // }
  },
  mounted() {
    var that = this;
    // that.$nextTick(() => {
    // 	this.platform = this.$platform.get();
    // 	this.device = this.$platform.device();
    // 	this.redirected = this.$Route.query.redirected;
    // 	console.log("===========this.platform", this.platform, "========this.device", this.device, this.authType)
    // })

  },
  created() {
    // this.$nextTick(()=>{
    //   console.log("======authType111",this.authType)
    //   this.$store.dispatch('showAuthModal','toLogins');
    // })
    // console.log("======authType222",this.authType)
  },
  watch: {
    authType(val) {

      if (val == 'smsLogin') {
        this.title = '手机号登录';
        this.isOrder = '2'
      }
      if (val == 'register') {
        this.title = '注册';
        this.isOrder = '2'
      }
      if (val == 'accountLogin') {
        this.title = '账号登录';
        this.isOrder = '2'
      }
      if (val == 'forgotPwd') {
        this.title = '忘记密码';
        this.isOrder = '2'
      }
      if (val == 'toLogin') {
        this.title = '登录';
        this.isOrder = '1'
      }
    }
  },
  methods: {
    ...mapActions(['getUserInfo', 'showAuthModal']),
    open() {
      // console.log('open');
    },
    close() {
      this.bindmobille = false
      // console.log('close');
    },
    phone_login(type) {
      if (type == 'smsLogin') {
        this.$store.dispatch('showAuthModal', 'smsLogin');
      }
      if (type == 'register') {
        this.$store.dispatch('showAuthModal', 'register');
      }
      if (type == 'accountLogin') {
        this.$store.dispatch('showAuthModal', 'accountLogin');
      }
      if (type == 'forgotPwd') {
        this.$store.dispatch('showAuthModal', 'forgotPwd');
      }
      if (type == "changePwd") {
        this.$store.dispatch('showAuthModal', 'changePwd');
      }
    },
    // 检测
    checkValue(e, key) {
      this.validation(key);
    },

    // 校验数据
    validation(key, callback = () => { }) {
      let that = this;
      //拿到需要校验的数据
      let fieldValue = this.form[this.authType].data[key];
      //拿到需要检验的规则
      let rules = this.form[this.authType].rules[key];
      // 判空
      if (!rules || rules.length === 0) {
        return callback('');
      }
      // 设置当前的装填，标识为校验中
      let validateState = 'validating';
      // 调用async-validator的方法
      let validator = new schema({
        [key]: rules
      });
      // 校验
      validator.validate({
        [key]: fieldValue
      }, {
        firstFields: true
      },
        (errors, fields) => {
          // 记录状态和报错信息
          validateState = !errors ? 'success' : 'error';
          let validateMessage = errors ? errors[0].message : '';
          that.form[that.authType].error[key] = validateMessage;
          callback(validateMessage);
        }
      );
    },

    // 校验全部数据
    validateAll(callback) {
      let that = this;
      return new Promise(resolve => {
        // 对当前所有表单检验
        let valid = true; // 默认通过
        let count = 0; // 用于标记是否检查完毕
        let errorArr = []; // 存放错误信息
        let curFormData = that.form[that.authType].data;
        Object.keys(curFormData).map(field => {
          that.validation(field, error => {
            // 如果回调有error
            if (error) {
              valid = false;
              errorArr.push(error);
            }
            if (++count === Object.keys(curFormData).length) {
              resolve(valid);
              if (errorArr.length) {
                this.$u.toast(errorArr[0]);
              }
              if (typeof callback == 'function') callback(valid);
            }
          });
        });
      });
    },

    // 手机号是否输入完毕
    mobileInput(e, key) {
      this.form[this.authType].data.isMobileEnd = this.$u.test.mobile(this.form[this.authType].data.mobile);
      this.validation(key);
    },

    closeAuthModal() {
      this.$store.dispatch('showAuthModal', '');
    },

    // 获取短信验证码
    getSmsCode(type) {
      const that = this;
      if (that.form[this.authType].data.isMobileEnd && !that.disabledCode) {
        that.$https(
          'common.smsSend', {
          mobile: that.form[this.authType].data.mobile,
          event: type
        },
          '获取验证码中...'
        ).then(res => {
          if (res.code === 1) {
            that.codeChange();
            that.$u.toast('验证码已发送，请注意查收短信');
          } else {
            that.$u.toast(res.msg);
          }
        });
      } else {
        that.$u.toast('请稍后再试');
      }
    },

    // 倒计时
    codeChange() {
      if (this.disabledCode) return;
      this.disabledCode = true;
      let n = 60;
      this.codeText = n + 's';
      const run = setInterval(() => {
        n -= 1;
        if (n < 0) {
          clearInterval(run);
        }
        this.codeText = n + 's';
        if (this.codeText < 0 + 's') {
          this.disabledCode = false;
          this.codeText = '重新获取';
        }
      }, 1000);
    },

    // 规则校验
    validateSubmit() {
      if (['accountLogin', 'register'].includes(this.authType) && !this.protocol) {
        this.$u.toast('请同意用户协议');
        return false;
      }
      return this.validateAll();
    },
    clickagree() {
      this.$u.toast('请同意用户协议');
    },
    async getPhoneNumber(e) {
      console.log('11', e)
      let res = e.detail;
      let that = this;
      if (res.errMsg === "getPhoneNumber:ok") {
        uni.showLoading({
          title: "登录中..."
        });
        await that.$https("user.wxMiniProgramOauth_bind", {
          session_key: uni.getStorageSync("session_key"),
          encryptedData: res.encryptedData,
          iv: res.iv,
          token: this.tokens,
          openid: uni.getStorageSync("openid"),
          store_shop_id: uni.getStorageSync("storeShopId")
        }).then(res => {
          console.log(res)
          if (res.code === 1) {
            uni.hideLoading();
            that.getUserInfo(res.data.userinfo);


            setTimeout(() => {
              console.log("-------res.data.userinfo", res.data.userinfo)
              if (this.redirected) {
                let arr = that.redirected.split("?");
                let url = arr[0];
                // let storeShopId = encodeURIComponent(decodeURIComponent(arr[1].split("e=")[1]));

                that.$Router.replace({ path: `${url}` })

                // console.log("-=========-url",arr, `${url}?scene=${storeShopId}`, storeShopId,)
                // uni.navigateTo({
                //   url: `/pages/user/wallet/coupon?scene=${storeShopId}`,
                // })

              } else {
                uni.navigateBack({
                  delta: 1
                });
              }
              that.closeAuthModal();
            }, 400)

          } else {
            that.$u.toast(res.msg);
          }
        });
      }
      return
    },
    // 第三方登录
    async thirdLogin(provider) {
      if (!this.protocol) {
        this.$u.toast('请同意用户协议');
        return false;
      }
      const that = this;
      let token = '';
      switch (provider) {
        case 'wechat':
          token = await wechat.login();
          break;
        case 'alipay':
          break;
        case 'apple':
          token = await apple.appleIdOauth();
          break;
        default:
          break;
      }
      if (token) {
        this.tokens = token.token;
        await this.$https('user.wxMiniProgramOauth_isbind', {
          token: token.token,
        }).then(res => {
          console.log(res)
          if (res.code === 1) {
            if (res.data.is_bind) {
              that.getUserInfo(token);

              setTimeout(() => {
                console.log("================this.redirected", this.redirected)
                if (this.redirected) {
                  let arr = that.redirected.split("?");
                  let url = arr[0];
                  // let storeShopId = encodeURIComponent(decodeURIComponent(arr[1].split("e=")[1]));
                  that.$Router.replace({ path: `${url}` })

                  // console.log("-=========-url",arr, `${url}?scene=${storeShopId}`, storeShopId,)
                  // uni.navigateTo({
                  //   url: `/pages/user/wallet/coupon?scene=${storeShopId}`,
                  // })
                } else {

                  uni.navigateBack({
                    delta: 1
                  });
                }
                that.closeAuthModal();
              }, 400)

            } else {
              this.bindmobille = true;
            }
          }
        });

      }
    },

    // 1.账号登录
    async accountLoginSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'user.accountLogin', {
            account: that.form['accountLogin'].data.account,
            password: that.form['accountLogin'].data.password,
          },
            '登录中...'
          )
          .then(res => {
            if (res.code === 1) {
              that.closeAuthModal();
              that.getUserInfo(res.data);
              that.$u.toast(res.msg);
              uni.navigateBack({
                delta: 1
              });
            }
          });
    },

    // 2.短信登录
    async smsLoginSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$https(
            'user.smsLogin', {
            mobile: that.form['smsLogin'].data.mobile,
            captcha: that.form['smsLogin'].data.code, //验证码
            openid: uni.getStorageSync("openid"),
          },
            '登录中...'
          )
          .then(res => {
            if (res.code === 1) {
              console.log("=========res.data.userinfo.token", res.data.userinfo.token)
              that.getUserInfo(res.data.userinfo);
              that.$u.toast(res.msg);

              setTimeout(() => {
                if (this.redirected) {
                  let arr = that.redirected.split("?");
                  let url = arr[0];
                  // let storeShopId = encodeURIComponent(decodeURIComponent(arr[1].split("e=")[1]));
                  // console.log("-=========-url",arr, `${url}?scene=${storeShopId}`, storeShopId,)
                  that.$Router.replace({ path: `${url}` })

                } else {
                  uni.navigateBack({
                    delta: 1
                  });
                }
                that.closeAuthModal();
              }, 300)

            }
          });
    },

    // 3.注册
    async registerSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'user.register', {
            mobile: that.form['register'].data.mobile,
            code: that.form['register'].data.code,
            password: that.form['register'].data.password
          },
            '注册中...'
          )
          .then(res => {
            if (res.code === 1) {
              that.$u.toast(res.msg);
              that.closeAuthModal();
              that.getUserInfo(res.data.token);
              uni.navigateBack({
                delta: 1
              });
            }
          });
    },

    // 4.忘记密码
    async forgotPwdSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'user.forgotPwd', {
            mobile: that.form['forgotPwd'].data.mobile,
            code: that.form['forgotPwd'].data.code,
            newPassword: that.form['forgotPwd'].data.newPassword, //新密码
            reNewPassword: that.form['forgotPwd'].data.reNewPassword, //确认密码
          },
            '修改中...'
          )
          .then(res => {
            if (res.code === 1) {
              that.$u.toast(res.msg);
              this.$store.dispatch('showAuthModal', 'accountLogin');
            }
          });
    },



    // 6.修改密码
    async changePwdSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'user.changePwd', {
            oldpassword: that.form['changePwd'].data.oldPassword,
            newpassword: that.form['changePwd'].data.newPassword
          },
            '修改中...'
          )
          .then(res => {
            if (res.code === 1) {
              that.closeAuthModal();
              that.$u.toast(res.msg);
              that.getUserInfo(res.data.userinfo.token);
            }
          });
    }
  },
};
</script>

<style lang="scss" scoped>
@keyframes title-animation {
  0% {
    font-size: 32rpx;
  }

  100% {
    font-size: 36rpx;
  }
}

.head_box {
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.form-wrap {
  .form-item {
    display: flex;
    flex-direction: column;
    font-size: 28rpx;
    padding: 20rpx 0;
    color: $u-main-color;
    box-sizing: border-box;
    line-height: $u-form-item-height;
    width: 100%;

    .item-title {
      width: 140rpx;
      font-size: 30rpx;
      color: #333;
      font-weight: 600;
      text-align: left;
    }

    .message-error {
      text-align: left;
      font-size: 24rpx;
      line-height: 24rpx;
      color: $u-type-error;
      margin-top: 12rpx;
    }
  }
}

.login-wrap {
  padding: 50rpx 34rpx;
  min-height: 700rpx;
  background-color: #fff;

  .head-box {
    .head-title {
      min-width: 160rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      line-height: 36rpx;
    }

    .head-title-active {
      width: 160rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #999;
      line-height: 36rpx;
    }

    .head-title-animation {
      animation-name: title-animation;
      animation-duration: 0.1s;
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
    }

    .head-title-line {
      position: relative;

      &::before {
        content: "";
        width: 1rpx;
        height: 34rpx;
        background-color: #e4e7ed;
        position: absolute;
        left: -30rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .head-subtitle {
      font-size: 26rpx;
      font-weight: 400;
      color: #c2c7cf;
      text-align: left;
      display: flex;
    }
  }

  .code-btn[disabled] {
    background-color: #fff;
  }

  .code-btn-start {
    width: 160rpx;
    line-height: 56rpx;
    border: 1rpx solid #fc5351;
    border-radius: 28rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #fc5351;
    opacity: 0.5;
  }

  .border-none {
    border: 0rpx solid #fc5351;
  }

  .forgot-btn {
    width: 160rpx;
    line-height: 56rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #999;
  }

  .code-btn-end {
    opacity: 1 !important;
  }

  .login-btn-start {
    //width: 158rpx;
    //line-height: 56rpx;
    //background: linear-gradient(90deg, #e9b461, #eecc89);
    //border-radius: 28rpx;
    //font-size: 26rpx;
    //font-weight: 500;
    //color: #ffffff;
    margin: 40rpx auto;
  }

  .type-btn {
    padding: 20rpx;
    margin: 40rpx auto;
    width: 200rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #999999;
  }

  .auto-login-box {
    width: 100%;
    height: 100%;

    .gray {
      color: #999999;
    }

    .u-m-t-40 {
      margin-top: 40rpx;
    }

    .auto-login-img {
      width: 120rpx;
      height: 120rpx;
      margin: 0 30rpx;
    }
  }
}

.tcp-text {
  color: #32b9ee;
}

.gray {
  color: #999999;
}

.login-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 50%;

  .login-img {
    width: 60rpx;
    height: 60rpx;
  }

  .title {
    margin-top: 50rpx;
    font-weight: bold;
    font-size: 32rpx;
  }

  .seckill-btn {
    width: 98%;
    line-height: 70rpx;
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
    font-size: 28rpx;
    font-weight: 500;
    border-radius: 10rpx;
    padding: 0;
    margin-top: 20%;
    margin-bottom: 30rpx;
  }
}

.seckill-btn {
  width: 98%;
  line-height: 70rpx;
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  font-size: 28rpx;
  font-weight: 500;
  border-radius: 10rpx;
  padding: 0;
  margin-top: 20%;
  margin-bottom: 30rpx;
}

// 修改密码
.editPwd-btn-box {
  .save-btn {
    width: 690rpx;
    line-height: 70rpx;
    background: linear-gradient(90deg, #e9b461, #eecc89);
    border-radius: 35rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
  }

  .forgot-btn {
    width: 690rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
  }
}

.agreement-box {
  position: fixed;
  bottom: 70rpx;
  width: 100%;
  margin: 80rpx auto 0;

  .protocol-check {
    transform: scale(0.7);
  }

  .agreement-text {
    font-size: 26rpx;
    font-weight: 500;
    color: #999999;

    .tcp-text {
      color: #32b9ee;
    }
  }
}
.notice-modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 612 rpx;
  min-height: 658 rpx;
  background: #ffffff;
  padding: 30 rpx;
  border-radius: 20 rpx;
  .seckill-btn {
    width: 612 rpx;
    margin-top: 50rpx;
  }
  .auto-login-img {
    width: 120rpx;
    height: 120rpx;
    margin: 92rpx 30rpx 30rpx;
  }
}
</style>
